<template>
	<view>
		<uni-nav-bar left-icon="left" backgroundColor="rgb(77, 139, 246)" :border="false" color="#fff"
			@clickLeft="onClickNavBack">
			<view class="nav-title">新增银行卡</view>
		</uni-nav-bar>
		<view class="content">
			<uni-forms style="border-bottom: 1px #eee solid;" label-position="top" :border="true">
				<!-- <uni-forms-item label="姓名">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.acctName" placeholder="请输入持卡人姓名" />
				</uni-forms-item> -->
				<uni-forms-item label="手机号">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.linkedPhone" placeholder="请输入银行卡预留手机号" />
				</uni-forms-item>
				<uni-forms-item label="银行卡号">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.linkedAcctNo" placeholder="请输入银行卡号" />
				</uni-forms-item>
				<!-- <uni-forms-item label="证件类型">

					<uni-easyinput :inputBorder="false" v-model="bankInfo.id_type" placeholder="请选择证件类型"  />
				</uni-forms-item> -->
				<!-- 	<uni-forms-item label="身份证号">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.idNo" placeholder="请填写身份证号" />
				</uni-forms-item> -->

				<!-- <uni-forms-item label="支付密码">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.password" placeholder="请输入银行卡支付密码"
						@focus="openKeyboard" />
				</uni-forms-item> -->

				<uni-forms-item label="验证码">
					<view class="verifyCode-box">
						<uni-easyinput :inputBorder="false" v-model="bankInfo.verifyCode" placeholder="请输入手机号验证码" />
						<view class="send" v-if="!isSend" @click="sendVerifyCode">
							发送验证码
						</view>
						<!-- <view class="countdown" v-else>
							{{ 60 }}s
						</view> -->
						<uni-countdown class="countdown" v-else :show-day="false" :showHour="false" :showMinute="false"
							:second="60" color="#BBBBBB" @timeup="timeup"></uni-countdown>
					</view>

				</uni-forms-item>
			</uni-forms>
			<view class="agree">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox value="agree" color="#457DF0" style="transform:scale(0.6)" />
					</label>

				</checkbox-group>
				<text>我已阅读并同意 <!-- <text style="color: #4667E2;">《用户服务协议》</text>、 --><text style="color: #4667E2;"
						@click="checkProtocol">《快捷支付协议》</text> </text>
			</view>
			<button style="border-radius: 50px;height: 35px;font-size: 14px;margin-top: 20px;"
				class="align-center justify-center" type="primary" hover-class="none" @click="next">确认</button>
		</view>

		<!-- show:是否显示弹框 phone:手机号  autoCountdown:自动时间秒数 len:短信验证码长度 @closeClick:关闭弹框 @confirmClick:确认弹框 -->
		<!-- <cc-codeDialog :show="verifyShow" :phone="bankInfo.bindPhone" :autoCountdown="true" :len="6"
			@closeClick="verifyShow=false" @confirmClick="confirmClick" @change="change"></cc-codeDialog> -->
	</view>
</template>

<script setup>
	// import ccCodeDialog from '@/uni_modules/cc-codeDialog/components/cc-codeDialog/cc-codeDialog.vue'
	import {
		ref,

	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import bankAcountApi from '@/sheep/api/member/bankAcount';
	import sheep from '@/sheep';
	const bankInfo = ref({
		// acctName: '',
		linkedAcctNo: '',
		password: '',
		// id_type: 'IDCARD',
		// idNo: '',
		linkedPhone: '',
		// id: '',
		userId: '',
		token: undefined,
		verifyCode: undefined,
	})
	const isSend = ref(false)
	const verifyShow = ref(false)

	const onClickNavBack = () => {
		uni.navigateBack()
	}
	let applyResData = {
		token: uni.getStorageSync("ResToekn") || '',
		txnSeqNo: uni.getStorageSync("ResTxnSeqNo") || ''
	}
	const sendVerifyCode = async () => {
		if (bankInfo.value.linkedPhone == '' || !/^1[3-9]\d{9}$/.test(bankInfo.value.linkedPhone)) {
			uni.showToast({
				title: '请输入正确的银行卡预留手机号',
				icon: 'none'
			})
			return
		}
		isSend.value = true
		let data = {
			userId: bankInfo.value.userId
		}
		let res = await bankAcountApi.getAcctmgrRandom(data)
		console.log('获取密码因子', res);

		let resp = await bankAcountApi.getAcctmgrPasswordToken({
			userId: uni.getStorageSync('userId') || '',
			passwordScene: 'bind_card_password'
		})
		console.log('获取密码控件token', resp);

		if (res.data.ret_code == "0000") {
			
			let obj={
				passwordScene: 'bind_card_password',
				oidPartner: res.data.oid_partner, // 商户号
				userId: res.data.user_id, // 用户号
				passwordElementToken: resp.data, // 向服务端请求生成的 token
				env: 'production', // 默认 production-生产
				linkedAcctNo: bankInfo.value.linkedAcctNo,
				userId: uni.getStorageSync('userId') || '',
				linkedPhone: bankInfo.value.linkedPhone,
			}
			let obj1=JSON.stringify(obj)
			
			uni.navigateTo({
				url:"/pages/webview/webview?data="+obj1
			})
			// 以下参数通过服务端获取
			// lianlianpay.invokePasswordControl({
			// 	/**
			// 	 * passwordScene 使用场景
			// 	 * setting_password-设置密码
			// 	 * change_password-修改密码
			// 	 * bind_card_password-换绑卡
			// 	 * cashout_password-提现
			// 	 * pay_password-支付
			// 	 */
			// 	passwordScene: 'bind_card_password',
			// 	oidPartner: res.data.oid_partner, // 商户号
			// 	userId: res.data.user_id, // 用户号
			// 	passwordElementToken: resp.data, // 向服务端请求生成的 token
			// 	env: 'production', // 默认 production-生产
			// 	styles: { // 样式集合
			// 		themeColor: '#0E59F0', // 主题颜色（按钮等）
			// 	}
			// }, async (passwordRes) => {
			// 	console.log('密码数据', res)
			// 	let data = {
			// 		linkedAcctNo: bankInfo.value.linkedAcctNo,
			// 		userId: uni.getStorageSync('userId') || '',
			// 		linkedPhone: bankInfo.value.linkedPhone,
			// 		randomKey: passwordRes.data.randomKey,
			// 		password: passwordRes.data.password,
			// 	}
			// 	let applyRes = await bankAcountApi.bindcardApply(data)
			// 	console.log('个人用户新增绑卡申请', applyRes)
			// 	if (applyRes.data.ret_code == '0000') {
			// 		applyResData.token = applyRes.data.token;
			// 		applyResData.txnSeqNo = applyRes.data.txn_seqno;
			// 	}
			// })
		}
	}

	const timeup = () => {
		isSend.value = false
	}

	//个人用户新增绑卡申请
	// const applyCard = async (data) => {
	// 	let res = await bankAcountApi.bindcardApply(data)
	// 	console.log('个人用户新增绑卡申请', res)
	// }
	const checkProtocol = () => {
		uni.navigateTo({
			url: '/pages/me/components/payAgree'
		})
	}
	const next = async () => {
		// verifyShow.value = true
		console.log('bankInfo.value', bankInfo.value);
		// if (bankInfo.value.acctName == '') {
		// 	uni.showToast({
		// 		title: '请输入持卡人姓名',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		if (bankInfo.value.linkedPhone == '' || !/^1[3-9]\d{9}$/.test(bankInfo.value.linkedPhone)) {
			uni.showToast({
				title: '请输入正确的银行卡预留手机号',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.linkedAcctNo == '' || !/^\d{13,19}$/.test(bankInfo.value.linkedAcctNo)) {
			uni.showToast({
				title: '请输入正确的银行卡号',
				icon: 'none'
			})
			return
		}
		if (!bankInfo.value.verifyCode) {
			uni.showToast({
				title: '请输入手机号验证码',
				icon: 'none'
			})
			return
		}
		if (!isAgree.value) {
			uni.showToast({
				title: '请同意快捷支付协议',
				icon: 'none'
			})
			return
		}

		let data = {
			token: uni.getStorageSync("ResToekn") || '',
			txnSeqNo: uni.getStorageSync("ResTxnSeqNo") || '',
			userId: uni.getStorageSync('userId') || '',
			verifyCode: bankInfo.value.verifyCode
		}
		let res = await bankAcountApi.bindcardVerify(data)

		if (res.data.ret_code == '0000') {
			uni.showToast({
				title: '新增成功',
				icon: 'none'
			})
			uni.removeStorageSync("ResToekn")
			uni.removeStorageSync("ResTxnSeqNo")
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/me/bankCard'
				})
			}, 3000)
		} else {
			uni.showToast({
				title: res.data.ret_msg,
				icon: 'none'
			})
		}


	}
	const openKeyboard = async () => {
		uni.hideKeyboard()
		//获取密码因子
		let data = {
			userId: bankInfo.value.userId
		}
		let res = await bankAcountApi.getAcctmgrRandom(data)
		console.log('获取密码因子', res);

		let resp = await bankAcountApi.getAcctmgrPasswordToken({
			passwordScene: 'bind_card_password'
		})
		console.log('获取密码控件token', resp);
		return
		if (res.data.ret_code == "0000") {
			// 以下参数通过服务端获取
			lianlianpay.invokePasswordControl({
				/**
				 * passwordScene 使用场景
				 * setting_password-设置密码
				 * change_password-修改密码
				 * bind_card_password-换绑卡
				 * cashout_password-提现
				 * pay_password-支付
				 */
				passwordScene: 'bind_card_password',
				oidPartner: res.data.oid_partner, // 商户号
				userId: res.data.user_id, // 用户号
				passwordElementToken: resp.data.random_value, // 向服务端请求生成的 token
				env: 'production', // 默认 production-生产
				styles: { // 样式集合
					themeColor: '#0E59F0', // 主题颜色（按钮等）
				}
			}, (res) => {
				console.log('密码数据', res)
			})
		}

	}
	const confirmClick = async (result) => {
		console.log("result = ", result);
		bankInfo.value.verifyCode = result.code
		let res = await PayOrderApi.twoPay(bankInfo.value)
		console.log('付款', res)
		if (res.code == 0) {
			if (res.data.ret_code == '0000') {
				uni.showToast({
					title: res.data.ret_msg,
					icon: 'success',
					success: function() {
						sheep.$router.redirect('/pages/pay/result', {
							id: bankInfo.value.id,
							orderType: payInfo.value.orderType,
							payState: 'success'
						});
					}
				})
			} else {
				uni.showToast({
					title: res.data.ret_msg,
					icon: 'none'
				})
			}
		}
	}
	const change = async (val) => {

		console.log('val', val)
		if (val.type == "0") {
			let res = await PayOrderApi.goPay(bankInfo.value)
			console.log('提交银行卡信息', res)
			if (res.ret_code == '8888') {
				verifyShow.value = true
				bankInfo.value.token = res.token
			} else {
				uni.showToast({
					title: res.ret_msg,
					icon: 'none'
				})
			}
		}

	}
	const isAgree = ref(false)
	const changeAgree = (e) => {

		if (e.detail.value.length > 0) {
			isAgree.value = true
		} else {
			isAgree.value = false
		}
	}
	const payInfo = ref({})
	onLoad((e) => {
		console.log(e.data)
		bankInfo.value.userId = uni.getStorageSync('userId') || ''
		console.log('bankInfo.value', bankInfo.value);
	})
</script>

<style lang="scss" scoped>
	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.content {
		padding: 20px;
		box-sizing: border-box;
	}

	.verifyCode-box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.send {
			padding: 5px 10px;
			box-sizing: border-box;
			background: #007AFF;
			color: white;
			border-radius: 50px;
			font-size: 11px;
		}

		.countdown {
			padding: 5px 10px;
			box-sizing: border-box;
			font-size: 14px;

		}
	}

	.agree {
		// width: 90%;
		margin-top: 10px;
		// padding: 0 20px;
		font-size: 12px;
		display: flex;
		align-items: center;
	}
</style>